﻿<!DOCTYPE html>
<html>
	<head>
		<title>DAE Demo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="webgl.css" type="text/css">
		<script src="SmitearWebGL/smitearwebgl.js" type="text/javascript"></script>
		<script src="SmitearWebGL/core/basic.js" type="text/javascript"></script>
		<script src="SmitearWebGL/core/datapool.js" type="text/javascript"></script>
		<script src="SmitearWebGL/core/poolgroup.js" type="text/javascript"></script>
		<script src="SmitearWebGL/core/resourceItem.js" type="text/javascript"></script>
		<script src="SmitearWebGL/core/resourcePool.js" type="text/javascript"></script>
		<script src="SmitearWebGL/core/geometry/geometry.js" type="text/javascript"></script>
		<script src="SmitearWebGL/core/geometry/adjacencyinfo.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/buffer.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/vertexbuffer.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/indexbuffer.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/bitmap.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/texture.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/texture2d.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/texturecube.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/shader.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/surfacematerial.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/materiallayer.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/rendersurface.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/framebufferobject.js" type="text/javascript"></script>
		<script src="SmitearWebGL/resources/internalsamplers.js" type="text/javascript"></script>
		<script src="SmitearWebGL/programs/internalprograms.js" type="text/javascript"></script>
		<script src="SmitearWebGL/programs/abstractprogram.js" type="text/javascript"></script>
		<script src="SmitearWebGL/programs/lightprepass/ssaoprogram.js" type="text/javascript"></script>
		<script src="SmitearWebGL/renderer/lpprenderer.js" type="text/javascript"></script>
		<script src="SmitearWebGL/renderer/hdrrenderer.js" type="text/javascript"></script>
		<script src="SmitearWebGL/renderer/internalrenderers.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/entity.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/container.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/camera.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/light.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/mesh.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/shadowmesh.js" type="text/javascript"></script>
		<script src="SmitearWebGL/scene/scene.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/primitive/sphere.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/primitive/teapot.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/primitive/skybox.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/primitive/torus.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/primitive/torusknot.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/primitive/plane.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/primitive/cube.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/external/collada.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/canvas/hdr/luminance.js" type="text/javascript"></script>
		<script src="SmitearWebGL/objects/canvas/lightprepass/ssao.js" type="text/javascript"></script>
		<script type="text/javascript">
			
			var smitear, camera0, scene0, dae0;
			var material, material2, material3, material4, material5, layer;
			var lights = [], lSpheres = [], defaultNumLights = 1, nt = 0;
			var degree = 0;
			
			function applicationStart()
			{
				document.getElementById("numLights").value = defaultNumLights;
				document.getElementById("ssao_enable").checked = false;
				document.getElementById("hdr_enable").checked = false;
				document.getElementById("tex_enable").checked = false;
				document.getElementById("sha_enable").checked = false;
				document.getElementById("vol_enable").checked = false;
				
				smitear = new SmitearWebGL();
				smitear.init( "glcanvas" );
				
				ssaoParamChange();
				hdrParamChange();
				
				camera0 = smitear.objectManager.createResource( "camera0", SmitearWebGL.Objects.Camera, { fov : 45.0, aspect : 1024 / 512, near : 0.1, far : 1000.0 } );
				camera0.setX(0);
				camera0.setY(0);
				camera0.setZ(5);
				camera0.setTarget($V3(0.0, 0.0, 0.0));
				
				scene0 = smitear.objectManager.createResource( "scene0", SmitearWebGL.Scene.Scene, { worldWidth : 500.0, worldHeight : 500.0, worldDepth : 500.0, treeDepth : 2, rendererType : SmitearWebGL.Renderer.Renderer.Type.LIGHT_PRE_PASS_RENDERER } );
				scene0.addEventListener( SmitearWebGL.Events.Event.FRAME_MOVE, this, this.onFrameMove );
				scene0.setAmbient( $C( 1.0, 1.0, 1.0, 1.0 ) );
				
				dae0 = smitear.objectManager.createResource( "dae0", SmitearWebGL.Objects.External.Collada );
				dae0.setDocument( "media/plane.dae" );
				
				smitear.canvas.addEventListener("mousedown", handleMouseDown, false);
				smitear.canvas.addEventListener("mouseup", handleMouseUp, false);
				smitear.canvas.addEventListener("mousemove", handleMouseMove, false);
				window.addEventListener('keydown', handleKeyDown, true);
				window.addEventListener('keyup', handleKeyUp, true);
				
//				scene0.render( camera0, 60 );
			}

			function onFrameMove( e )
			{
				var deltaTime = scene0.getRenderSystem().deltaTime / 30.0;
				
				entity0.rotateX(deltaTime);
				entity0.rotateY(deltaTime);
				entity0.rotateZ(deltaTime);
			}

			function addLights(numLights)
			{
				var handle;
				var light;
				var lSphere;
				var lMat;

				for ( var i = 0; i < numLights; ++ i )
				{
					var r = Math.random();
					var g = Math.random();
					var b = Math.random();
					light = smitear.objectManager.createResource( "light_" + nt, SmitearWebGL.Objects.Light );
					light.type = SmitearWebGL.Objects.Light.L_POINT;
					light.baseColor = $C(r, g, b, 1.0);
					light.intensity = 1.0;
					light.constantAttenuation = 0.5;
					light.linearAttenuation = 0.005;
					light.quadraticAttenuation = 0.00001;
					light.setInnerCone(32.0);
					light.setOuterCone(60.0);
					light.spotExponent = 4.0;
//					light.setX(2.0);
//					light.setY(-1.0);
//					light.setZ(5.3);
					light.setX(getRandom(2, 3.0));
					light.setY(getRandom(2, 3.0));
					light.setZ(getRandom(2, 3.0));
					light.setDirectionX(Math.random()*2-1);
					light.setDirectionY(Math.random()*2-1);
					light.setDirectionZ(Math.random()*2-1);
					light.speed = Math.random()*2-1;
					entity0.addChild(light);
					lights.push(light);

					lMat = smitear.resourceManager.createResource("__light_material__" + nt, SmitearWebGL.Resources.SurfaceMaterial);
					lMat.ambient = $C( r*0.5, g*0.5, b*0.5, 1.0 );
					lMat.diffuse = $C( r*0.8, g*0.8, b*0.8, 1.0 );
					lMat.specular = $C( r*0.3, g*0.3, b*0.3, 1.0 );
					lMat.emissive = $C( 0.0, 0.0, 0.0, 1.0 );

					var lSphere = smitear.objectManager.createResource("__light_entity__" + nt, SmitearWebGL.Objects.Primitive.Sphere, {radius:0.1, segmentsW:8, segmentsH:6});
					lSphere.setMaterial(lMat);
					lSphere.backFaceCulling = true;
					lSphere.setX( light.getX() );
					lSphere.setY( light.getY() );
					lSphere.setZ( light.getZ() );
					entity0.addChild(lSphere);
					lSpheres.push(lSphere);

					nt ++;
				}
			}

			function removeLights(numLights)
			{
				if ( numLights > lights.length )
				numLights = lights.length;

				var total = lights.length - 1;
				var end = lights.length - numLights;

				for ( var i = total; i >= end; -- i )
				{
					entity0.removeChild(lights[i]);
					entity0.removeChild(lSpheres[i]);
					lights.pop().release();
					lSpheres.pop().release();
				}
			}

			function getRandom(a, b)
			{
				var result = Math.random() * b + a;
				var rd = Math.random();
				if ( rd > .5)
				return result;
				else
				return - result;
			}
			
			function setupMaterial()
			{				//texture for skybox
				material2 = smitear.resourceManager.createResource("material2", SmitearWebGL.Resources.SurfaceMaterial);
				material2.ambient = $C( 0.3, 0.3, 0.3, 1.0 );
				material2.diffuse = $C( 0.7, 0.7, 0.7, 1.0 );
				material2.specular = $C( 0.2, 0.2, 0.2, 1.0 );
				material2.emissive = $C( 0.0, 0.0, 0.0, 1.0 );
				material2.shininess = 32.0;
				material2.doubleSide = false;

				var cubemapTex = smitear.resourceManager.createResource("media/cubemap/CubemapCross.png", SmitearWebGL.Resources.TextureCube);
				cubemapTex.addEventListener( SmitearWebGL.Resources.Texture.LOAD_COMPLETE, this, this.textureCompleteHandler);
				cubemapTex.load("media/cubemap/CubemapCross.png");
				layer = smitear.resourceManager.createResource("materialLayer", SmitearWebGL.Resources.MaterialLayer);
				layer.mapinput = SmitearWebGL.Resources.MaterialLayer.UV1;
				layer.mapToDiffuse(true);
				layer.mapToSpecular(false);
				layer.mapToEmissive(false);
				layer.setTexture(cubemapTex);
				material2.addLayer(layer);

				//multply woodTex
				material = smitear.resourceManager.createResource("material", SmitearWebGL.Resources.SurfaceMaterial);
				material.ambient = $C( 0.3, 0.3, 0.3, 1.0 );
				material.diffuse = $C( 0.8, 0.8, 0.8, 1.0 );
				material.specular = $C( 0.8, 0.8, 0.8, 1.0 );
				material.emissive = $C( 0.0, 0.0, 0.0, 1.0 );
				material.shininess = 8.0;
				material.doubleSide = true;

				var woodTex = smitear.resourceManager.createResource("media/wood01.jpg", SmitearWebGL.Resources.Texture2D);
				woodTex.addEventListener( SmitearWebGL.Resources.Texture.LOAD_COMPLETE, this, this.textureCompleteHandler);
				woodTex.load("media/wood01.jpg");
				layer = smitear.resourceManager.createResource("materialLayer2", SmitearWebGL.Resources.MaterialLayer);
				layer.mapinput = SmitearWebGL.Resources.MaterialLayer.UV1;
				layer.mapToDiffuse(true);
				layer.mapToSpecular(false);
				layer.mapToEmissive(false);
				layer.setTexture(woodTex);
				material.addLayer(layer);

				var cubeTex = smitear.resourceManager.createResource("media/cubetexture.png", SmitearWebGL.Resources.Texture2D);
				cubeTex.load("media/cubetexture.png");
				cubeTex.addEventListener( SmitearWebGL.Resources.Texture.LOAD_COMPLETE, this, this.textureCompleteHandler);
				layer = smitear.resourceManager.createResource("materialLayer3", SmitearWebGL.Resources.MaterialLayer);
				layer.mapinput = SmitearWebGL.Resources.MaterialLayer.UV1;
				layer.mapToDiffuse(true);
				layer.mapToSpecular(false);
				layer.mapToEmissive(false);
				layer.setTexture(cubeTex);
				material.addLayer(layer);
				
				//no texutre for ojbects
				material3 = smitear.resourceManager.createResource("material3", SmitearWebGL.Resources.SurfaceMaterial);
				material3.ambient = $C( 0.2, 0.2, 0.2, 1.0 );
				material3.diffuse = $C( 0.8, 0.8, 0.8, 1.0 );
				material3.specular = $C( 0.4, 0.4, 0.4, 1.0 );
				material3.emissive = $C( 0.0, 0.0, 0.0, 1.0 );
				material3.shininess = 12.0;
				material3.doubleSide = true;

				//no texutre for skybox
				material4 = smitear.resourceManager.createResource("material4", SmitearWebGL.Resources.SurfaceMaterial);
				material4.ambient = $C( 0.3, 0.3, 0.3, 1.0 );
				material4.diffuse = $C( 0.2, 0.2, 0.2, 1.0 );
				material4.specular = $C( 0.1, 0.1, 0.1, 1.0 );
				material4.emissive = $C( 0.0, 0.0, 0.0, 1.0 );
				material4.shininess = 16.0;
				material4.doubleSide = false;

				material5 = smitear.resourceManager.createResource("material5", SmitearWebGL.Resources.SurfaceMaterial);
				material5.ambient = $C( 0.3, 0.3, 0.3, 1.0 );
				material5.diffuse = $C( 0.8, 0.8, 0.8, 1.0 );
				material5.specular = $C( 0.8, 0.8, 0.8, 1.0 );
				material5.emissive = $C( 0.0, 0.0, 0.0, 1.0 );
				material5.shininess = 8.0;
				material5.doubleSide = true;

				layer = smitear.resourceManager.createResource("materialLayer5", SmitearWebGL.Resources.MaterialLayer);
				layer.mapinput = SmitearWebGL.Resources.MaterialLayer.MAP_ENV;
				layer.mapToDiffuse(true);
				layer.mapToSpecular(false);
				layer.mapToEmissive(false);
				layer.setTexture(cubemapTex);
				material5.addLayer(layer);
			}

			function textureCompleteHandler(e)
			{
				var tex = e.sender;
				var sampler = smitear.resourceManager.createResource("sampler" + tex.name, SmitearWebGL.Resources.Sampler);
				tex.removeEventListener(  SmitearWebGL.Resources.Texture.LOAD_COMPLETE, this.textureCompleteHandler );
				tex.bindSampler(sampler);
			}

			//////////////////////////////// interactive //////////////////////////////

			var mouseDown = false;
			var lastMouseX = 0, lastMouseY = 0;
			var speed = 0.01;

			function handleMouseDown(event)
			{
				mouseDown = true;
				lastMouseX = event.clientX;
				lastMouseY = event.clientY;
			}

			function handleMouseUp(event)
			{
				mouseDown = false;
			}

			function handleMouseMove(event)
			{
				if ( mouseDown )
				{
					var newX = event.clientX;
					var newY = event.clientY;

					var mouseX = (newX - lastMouseX) * 0.05;
					var mouseY = (newY - lastMouseY) * 0.05;
					camera0.upward(mouseY);
					camera0.leftward(mouseX);

					lastMouseX = newX;
					lastMouseY = newY;
				}
			}
			
			var isRendering = true;

			function handleKeyDown(event)
			{
				if (String.fromCharCode(event.keyCode) == "S")
				{
					if ( isRendering )
						scene0.stopRendering();
					else
						scene0.render(camera0, 60);

					isRendering = ! isRendering;
				}
			}

			function handleKeyUp(event)
			{
			}

			function btnDec_click()
			{
				var elem = document.getElementById("numLights");
				var num = parseInt(elem.value);
				if ( num == 0 ) return;
				-- num;
				elem.value = num.toString();

				removeLights( 1 );
			}

			function btnInc_click()
			{
				var elem = document.getElementById("numLights");
				var num = parseInt(elem.value);
				if ( num == 255 ) return;
				++ num;
				elem.value = num.toString();

				addLights( 1 );
			}

			function numLights_chnage(value)
			{
				var numToAddOrDel = value - lights.length;
				if ( numToAddOrDel > 0 )
				{
					addLights(numToAddOrDel);
				}
				else
				{
					removeLights(-numToAddOrDel);
				}
			}

			function ssaoEnable()
			{
				if ( document.getElementById("ssao_enable").checked )
				SmitearWebGL.Scene.enableSSAO();
				else
				SmitearWebGL.Scene.disableSSAO();
			}

			function ssaoParamChange()
			{
				var strength = Number( document.getElementById("ssao_strength").value );
				var scale = Number( document.getElementById("ssao_scale").value );
				var falloff = Number( document.getElementById("ssao_falloff").value );
				var rad = Number( document.getElementById("ssao_rad").value );

				document.getElementById("ssao_strength_v").innerHTML = strength;
				document.getElementById("ssao_scale_v").innerHTML = scale;
				document.getElementById("ssao_falloff_v").innerHTML = falloff;
				document.getElementById("ssao_rad_v").innerHTML = rad;

				SmitearWebGL.Scene.setSSAOParam(strength, scale, falloff, rad );
			}

			function hdrEnable()
			{
				if ( document.getElementById("hdr_enable").checked )
				SmitearWebGL.Scene.enableHDR();
				else
				SmitearWebGL.Scene.disableHDR();
			}

			function hdrParamChange()
			{
				var threshold = Number( document.getElementById("hdr_threshold").value );
				var gaussMultiplier = Number( document.getElementById("hdr_gaussMultiplier").value );
				var gaussMean = Number( document.getElementById("hdr_gaussMean").value );
				var gaussStdDev = Number( document.getElementById("hdr_gaussStdDev").value );
				var exposure = Number( document.getElementById("hdr_exposure").value );

				document.getElementById("hdr_threshold_v").innerHTML = threshold;
				document.getElementById("hdr_gaussMultiplier_v").innerHTML = gaussMultiplier;
				document.getElementById("hdr_gaussMean_v").innerHTML = gaussMean;
				document.getElementById("hdr_gaussStdDev_v").innerHTML = gaussStdDev;
				document.getElementById("hdr_exposure_v").innerHTML = exposure;

				SmitearWebGL.Scene.setHDRParam(threshold, gaussMultiplier, gaussMean, gaussStdDev, exposure );
			}
			
			var texEnable = false;
			function textureEnable()
			{
				if ( ! texEnable )
				{
					sky0.setMaterial(material2);
					plane0.setMaterial(material5);
					teapot0.setMaterial(material5);
					torusknot0.setMaterial(material5);
					sphere0.setMaterial(material5);
					torus0.setMaterial(material5);
				}
				else
				{
					sky0.setMaterial(material4);
					plane0.setMaterial(material3);
					teapot0.setMaterial(material3);
					torusknot0.setMaterial(material3);
					sphere0.setMaterial(material3);
					torus0.setMaterial(material3);
				}
				texEnable = ! texEnable;
			}
			
			var _shadowEnable = false;
			function shadowEnable()
			{
				if ( ! _shadowEnable )
				{
					SmitearWebGL.Scene.enableShadow();
				}
				else
				{
					SmitearWebGL.Scene.disableShadow();
				}
				_shadowEnable = ! _shadowEnable;
			}
			
			var _showShadowVolume = false;
			function showShadowVolume()
			{
				if ( ! _showShadowVolume )
				{
					SmitearWebGL.Scene.showShadowVolume();
				}
				else
				{
					SmitearWebGL.Scene.hideShadowVolume();
				}
				_showShadowVolume = ! _showShadowVolume;
			}
			
			function pointEnable()
			{
				material.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.POINT;
				material2.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.POINT;
				material3.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.POINT;
				material4.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.POINT;
				material5.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.POINT;
			}
			
			function wireFrameEnable()
			{
				material.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.WIREFRAME;
				material2.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.WIREFRAME;
				material3.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.WIREFRAME;
				material4.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.WIREFRAME;
				material5.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.WIREFRAME;
			}
			
			function triangleEnable()
			{
				material.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.TRIANGLE;
				material2.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.TRIANGLE;
				material3.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.TRIANGLE;
				material4.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.TRIANGLE;
				material5.renderMode = SmitearWebGL.Resources.SurfaceMaterial.renderMode.TRIANGLE;
			}
		</script>
	</head>
	<body onload="applicationStart();">
		<div class="webglContent">
			<div id="glstatus" class="stats-css"></div>
			<div id="glcanvas" class="gl-css"></div>
			<div id="control" class="shadow radius-border">
				<div id="wireframe">
					<div><span>Point Mode</span><input id="point_enable" name="select_role" type="radio" checked="" onclick="pointEnable();"/></div>
					<div><span>WireFrame Mode</span><input id="wire_enable" name="select_role" type="radio" checked="" onclick="wireFrameEnable();"/></div>
					<div><span>Triangle Mode</span><input id="triangle_enable" name="select_role" type="radio" checked="true" onclick="triangleEnable();"/></div>
					<hr />
				</div>
				<div id="texutre">
					<div><span>Enable texture</span><input id="tex_enable" type="checkbox" checked="" onclick="textureEnable();"/></div>
					<hr />
				</div>
				<div id="shadow">
					<div><span>Enable shadow</span><input id="sha_enable" type="checkbox" checked="" onclick="shadowEnable();"/></div>
					<div><span>Show Shadow Volume</span><input id="vol_enable" type="checkbox" checked="false" onclick="showShadowVolume();"/></div>
					<hr />
				</div>
				<div id="lighting">
					Light number:
					<button type="button" id="btnDec" onclick="btnDec_click();">-</button>
					<input id="numLights" value="0" style="width:20px;" onchange="numLights_chnage(parseInt(this.value));"/>
					<button type="button" id="btnInc" onclick="btnInc_click();">+</button>
					<hr />
				</div>
				<div id="ssao">
					<div><span>Enable SSAO</span><input id="ssao_enable" type="checkbox" checked="" onclick="ssaoEnable();"/></div>
					<div><span>Strength</span><input id="ssao_strength" type="range" min="0.0" max="10.0" value="1.0" step="0.5" onchange="ssaoParamChange()";/><span id="ssao_strength_v">0</span></div>
					<div><span>Scale</span><input id="ssao_scale" type="range" min="-10.0" max="100.0" value="90.0" step="5.0" onchange="ssaoParamChange()";/><span id="ssao_scale_v">0</span></div>
					<div><span>Falloff</span><input id="ssao_falloff" type="range" min="-0.01" max="0.01" value="0.000002" step="0.001" onchange="ssaoParamChange()";/><span id="ssao_falloff_v">0</span></div>
					<div><span>Rad</span><input id="ssao_rad" type="range" min="0.00005" max="0.0003" value="0.00005" step="0.00005" onchange="ssaoParamChange()";/><span id="ssao_rad_v">0</span></div>
					<hr />
				</div>
				<div id="hdr">
					<div><span>Enable HDR</span><input id="hdr_enable" type="checkbox" checked="" onclick="hdrEnable();"/></div>
					<div><span>Threshold</span><input id="hdr_threshold" type="range" min="0" max="1.0" value="0.9" step="0.01" onchange="hdrParamChange()";/><span id="hdr_threshold_v">0</span></div>
					<div><span>GaussMultiplier</span><input id="hdr_gaussMultiplier" type="range" min="0" max="1.0" value="0.25" step="0.01" onchange="hdrParamChange()";/><span id="hdr_gaussMultiplier_v">0</span></div>
					<div><span>GaussMean</span><input id="hdr_gaussMean" type="range" min="0" max="1.0" value="0.0" step="0.01" onchange="hdrParamChange()";/><span id="hdr_gaussMean_v">0</span></div>
					<div><span>GaussStdDev</span><input id="hdr_gaussStdDev" type="range" min="0" max="1.0" value="0.68" step="0.01" onchange="hdrParamChange()";/><span id="hdr_gaussStdDev_v">0</span></div>
					<div><span>Exposure</span><input id="hdr_exposure" type="range" min="0" max="1.0" value="0.4" step="0.01" onchange="hdrParamChange()";/><span id="hdr_exposure_v">0</span></div>
				</div>
			</div>
		</div>
		<div id="test"></div>
	</body>
</html>
